<template>
    <view class="w">
        <view class="video">{{ data.vidosUrl }}</view>
        <view class="article">
            <view class="title">防静电无尘服正确着装学习</view>
            <view class="score">学分：<view style="font-size: 42rpx;color: #F84702;font-weight: 400;">10</view>
            </view>
            <view class="main">
                <p>网格斜襟拉链裆底拉链连体服裆底装拉链，袖口、脚口、腰
                    部橡筋调节大小，连帽仅露眼，连帽配有口罩，帽后双调节
                    绊调节帽围。
                </p>
                <p> 优质防静电面料制作而成，具有高效、永久防静电、防尘性
                    能，薄滑，织纹清晰的特点。在制作成衣过程中采用专用的
                    包缝机械，有效减少微粒的产生。</p>
            </view>
        </view>
        <view class="liu-yan">
            <view class="title">| 学员留言</view>
            <view class="card">
                <view class="avatar">
                </view>
                <view class="r">
                    <view class="name">名字</view>
                    <view class="time">2024.03.12 14:00</view>
                    <view class="pl">占楼，我是第一！占楼，我是第一！占楼，我是第一！占楼，
                        我是第一！占楼，我是第一！</view>
                </view>
            </view>
            <view class="card">
                <view class="avatar">
                </view>
                <view class="r">
                    <view class="name">名字</view>
                    <view class="time">2024.03.12 14:00</view>
                    <view class="pl">占楼，我是第一！占楼，我是第一！占楼，我是第一！占楼，
                        我是第一！占楼，我是第一！</view>
                </view>
            </view>
            <view class="btn">
                <up-button type="primary" text="我要留言" @click="submit" shape="circle"></up-button>
            </view>
        </view>

    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const data = ref({})
onLoad(({ id, title }) => {
    uni.setNavigationBarTitle({
        title: String(title + id)
    });
    data.value = {
        vidosUrl: 'xx',
        article: {},
        liYan: {}
    }
})
const submit = () => {

}
</script>

<style lang="scss" scoped>
.w{
padding-bottom: 150rpx;
.video {
    height: 401rpx;
    background: blue;
    margin: 51rpx 0;
    border-radius: 25rpx 25rpx 25rpx 25rpx;
}

.article {
    .title {
        height: 44rpx;
        font-weight: 800;
        font-size: 32rpx;
        color: #333333;
    }

    .score {
        display: flex;
        align-items: center;
        font-weight: 300;
        font-size: 21rpx;
        color: #606060;
        margin: 16rpx 0;
    }

    .main {
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
        line-height: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2rpx solid #E9E9E9;
    }
}

.liu-yan {
    .title {
        margin-top: 15rpx;
        font-weight: 800;
        font-size: 26rpx;
        color: #001F79;
    }

    .card {
        display: flex;
        border-bottom: 2rpx solid #E9E9E9;
        padding-bottom: 14rpx;

        .avatar {
            margin: 35rpx 22rpx;
            width: 86rpx;
            height: 86rpx;
            background-color: #000000;
            border-radius: 50%;
        }

        .r {
            flex: 1;

            .name {
                margin: 43rpx 0 8rpx;
                font-weight: 400;
                font-size: 26rpx;
                color: #151515;
            }

            .time {
                font-weight: 300;
                font-size: 21rpx;
                color: #606060;
            }

            .pl {
                font-size: 21rpx;
                color: #606060;
                line-height: 42rpx;
            }
        }
    }

    .btn {
        width: 684rpx;
        height: 71rpx;
        position: fixed;
        bottom: 45rpx;
        left: 50%;
        transform: translateX(-50%);
    }

}
}
</style>